<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <menu-button ref="menuButton" @handleChange="openWin" />
    <!-- 表格（列表） -->
    <stu-table
      :header-cell-style="{ 'text-align': 'left' }"
      :cell-style="{ 'text-align': 'left' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="propsLabel"
      :handles="handles"
      row-key="id"
      @handleClick="clickHandle"
      :tree-props="treeProps"
    />

    <!-- 添加/修改目录弹窗 -->
    <edit-form
      :is-visible="showForm"
      :title="dialogs.title"
      :options="parentList"
      :info="dialogs.data"
      @close="close"
      @reflesh="updatePageData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import EditForm from "@/views/permission/dialogs/form";
import { parseTime } from "@/utils";
import { getMenuListAll, delMenu } from "@/api/role";

export default {
  name: "Menu",
  components: { Pagination, EditForm },
  data() {
    return {
      // 表格的列表数据--------------------------------------------
      tableData: [],
      //表头--------------------------------------------
      propsLabel: [
        // 表格的表头数据及其参数名称
        { name: "目录名称", value: "menuName" },
        { name: "路由地址", value: "menuRouteUrl" },
        { name: "优先级", value: "menuSort" },
        { name: "创建时间", value: "optionDate" },
        { name: "是否启用", value: "state" }
      ],
      //表格的操作列--------------------------------------------
      handles: {
        name: "操作",
        width: "200",
        show: true,
        btns: [
          {
            name: "修改",
            show: true,
            type: "edit",
            btnType: "primary",
            directive: "fun_2_zKYqfZ"
          },
          {
            name: "删除",
            show: true,
            type: "del",
            btnType: "danger",
            directive: "fun_2_yLWwog"
          }
        ]
      },
      //表单的父级目录选项的下拉数据--------------------------------------------
      parentList: [],
      //弹窗--------------------------------------------
      dialogs: {
        // 弹窗数据
        title: "新增目录",
        data: {}
      },
      // 编辑弹窗
      isEdit: false,
      // 渲染嵌套数据的配置选项
      treeProps: { children: "child" }
    };
  },
  computed: {
    showForm() {
      return this.isEdit;
    }
  },
  created() {
    this.getTables();
  },
  methods: {
    // 关闭弹窗
    close() {
      this.isEdit = false;
    },

    //获取表格数据--------------------------------------------
    getTables() {
      getMenuListAll().then(res => {
        if (res.state === 100) {
          this.tableData = this.filterData(res.items);
          this.parentList = this.formOptions(res.items, []);
        } else {
          this.tableData = [];
        }
      });
    },

    // 表格数据的参数重绘
    filterData(arr = []) {
      const res = [];
      arr.forEach(route => {
        const tmp = { ...route };
        tmp.state = tmp.ifStop === 0 ? "启用" : tmp.ifStop === 1 ? "禁用" : "";
        res.push(tmp);
      });
      return res;
    },

    //  弹窗--添加目录的父级目录的下拉数据
    formOptions(arr, savearr) {
      arr.forEach(route => {
        const tmp = { ...route };
        if (tmp.ifBtn === 0) {
          if (tmp.child && tmp.child.length > 0) {
            this.formOptions(tmp.child, savearr);
          }
          savearr.push({
            id: tmp.id,
            name: tmp.menuName
          });
        }
      });
      return savearr;
    },

    // 表格的操作
    clickHandle(row, type) {
      switch (type) {
        //删除--------------------------------------------
        case "del":
          this.clickDel(row);
          break;
        //编辑--------------------------------------------
        case "edit":
          this.dialogs.title = "修改菜单";
          this.dialogs.data = row;
          this.isEdit = true;
          break;
        default:
          break;
      }
    },

    // 按钮组的操作
    openWin(v) {
      switch (v.name) {
        case "刷新":
          this.updatePageData();
          break;
        case "新增目录":
          this.dialogs.data = {};
          this.dialogs.title = v.name;
          this.isEdit = true;
          break;
        default:
          break;
      }
    },

    //删除
    clickDel(row) {
      this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const params = {
            id: row.id
          };
          delMenu(params).then(res => {
            if (res.state === 100) {
              this.$message({ type: "success", message: "删除成功!" });
              this.updatePageData();
            }
          });
        })
        .catch(() => {});
    },

    //更新页面表格和按钮数据--------------------------------------------
    updatePageData() {
      this.getTables();
    }
  }
};
</script>
